<!--  -->
<template>
  <div class="header">
    <div class="header-wrapper">
      <div class="avatar">
        <img width="64" height="64" :src="seller.avatar" alt="">
      </div>
      <div class="content">
        <div class="title">
          <span class="brand"></span>
          <span class="name">{{seller.name}}</span>
        </div>
        <div class="description">
          <span>{{seller.description}}/{{seller.deliveryTime}}送达</span>
        </div>
        <div class="supports" v-if="seller.supports">
          <span class="icon" :class="classMap[seller.supports[0].type]"></span>
          <span class="support_des">{{seller.supports[0].description}}</span>
        </div>
      </div>
      <div class="support_count" v-if="seller.supports" @click="showDetail">
        <span class="count_text">{{seller.supports.length}}个</span>
        <i class="icon-keyboard_arrow_right"></i>
      </div>
    </div>
    <div class="notice" @click="showDetail">
      <span class="notice_icon"></span>
      <span class="notice_text">{{seller.bulletin}}</span>
      <i class="icon-keyboard_arrow_right"></i>
    </div>
    <div class="bg_img">
      <img :src="seller.avatar" width="100%" height="100%">
    </div>
    <transition name="slide-fade">
    <div class="detail" v-show="detailShow" >
      <div class="detail_wrapper clearfix">
        <div class="detail_main">
          <div class="name">{{seller.name}}</div>
          <div class="star_wrapper">
            <star size="48" :score="seller.score"></star>
          </div>
          <div class="supports">
            <div class="line"></div>
            <span class="text">优惠信息</span>
            <div class="line"></div>
          </div>
          <div class="supports_list"  v-if="seller.supports">
              <div class="supports_item" v-for="item in seller.supports">
                <span :class="classMap[item.type]" class="item_icon"></span><span class="item_text">{{item.description}}</span>
              </div>
          </div>
          <div class="notice_detal">
            <div class="line"></div>
            <span class="text">商家公告</span>
            <div class="line"></div>
          </div>
          <div class="notice_content">
            <p class="text">{{seller.bulletin}}</p>
          </div>

        </div>
      </div>
      <div class="detail_close" @click="closeDetail">
        <i class="icon-close"></i>
      </div>
    </div>
    </transition>
    
    
  </div>
</template>

<script>
import star from "@components/star/star.vue";
export default {
  data() {
    return {
      detailShow: false
    };
  },
  props: {
    seller: {
      type: Object
    }
  },
  components: {
    star
  },
  methods: {
    showDetail() {
      this.detailShow = true;
    },
    closeDetail() {
      this.detailShow = false;
    }
  },
  created() {
    this.classMap = ["decrease", "discount", "special", "invoice", "guarantee"];
  }
};
</script>

<style  lang='stylus' rel="stylesheet/stylus"  >
@import '../../common/stylus/mixin.styl';

.header 
  position: relative;
  overflow: hidden;
  background: rgba(7, 17, 27, 0.5);


.header-wrapper 
  position: relative;
  font-size: 0;
  color: #fff;
  padding: 24px 12px 18px 24px;
  .avatar 
    display: inline-block;
    vertical-align: top;
    img 
      border-radius: 2px;
  .content 
    display: inline-block;
    font-size: 14px;
    margin: 2px 0 2px 16px;
    .title 
      margin-bottom: 8px;
      font-size: 16px;
      font-weight: bold;
      line-height: 16px;
      .brand 
        display: inline-block;
        vertical-align: top;
        width: 30px;
        height: 18px;
        bg-image('brand');
        background-size: 30px 18px;
        background-repeat: no-repeat;
    .description 
      margin-bottom: 10px;
      font-size: 12px;
      font-weight: bold;
      line-height: 12px;
    .supports 
      height: 13px;
      line-height: 13px;
      .icon 
        display: inline-block;
        margin-right: 4px;
        width: 12px;
        height: 12px;
        vertical-align: middle;
        background-size: 12px 12px;
        background-repeat: no-repeat;
        &.decrease 
          bg-image('decrease_1');
        &.discount 
          bg-image('discount_1');
        &.gurantee 
          bg-image('guarantee_1');
        &.invoice 
          bg-image('invoice_1');
        &.special 
          bg-image('special_1');
      .support_des 
        font-size: 10px;
        vertical-align: middle;
        line-height: 13px;
  .support_count 
    position: absolute;
    right: 12px;
    bottom: 16px;
    padding: 0px 8px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    .count_text 
      margin-right: 2px;
      font-size: 10px;
    .icon-keyboard_arrow_right 
      font-size: 10px;
      line-height: 24px;
.notice 
  position: relative;
  height: 28px;
  line-height: 28px;
  padding-right: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: rgba(7, 17, 27, 0.2);
  color: #ffffff;
  overflow: hidden;
  .notice_icon 
    position: absolute;
    left: 12px;
    top: 9px;
    width: 22px;
    height: 12px;
    background-size: 22px 12px;
    background-repeat: no-repeat;
    bg-image('bulletin');
  .notice_text 
    margin-left: 38px;
    font-size: 10px;
    font-weight: bold;
  .icon-keyboard_arrow_right 
    position: absolute;
    right: 12px;
    top: 10px;
    font-size: 10px;
    font-weight: bold;
.bg_img 
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: blur(10px);

.slide-fade-enter-active 
  transition: all .5s ease

.slide-fade-leave-active 
  transition: all .3s ease

.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active 在低于 2.1.8 版本中 */ 
  transform: translateX(100%)
  opacity: 0


.detail 
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  transition: all 0.8s
  background-color: rgba(7, 17, 27, 0.85);
  &.fade-transition
    opacity: 1
    background: rgba(7, 17, 27, 0.8)
  &.fade-enter, &.fade-leave
    opacity: 0
    background: rgba(7, 17, 27, 0)
  .detail_wrapper 
    min-height: 100%;
    width: 100%;
    .detail_main 
      margin-top: 64px;
      padding-bottom: 64px;
      .name 
        text-align: center;
        font-size: 16px;
        line-height: 32px;
        font-weight: 700;
        color: #ffffff;
      .star_wrapper
          margin 16px auto 28px auto 
          text-align center
      .supports
        display flex
        width  80%
        margin 0 auto
        .line
          flex  1
          position relative
          top -6px
          border-bottom 1px solid rgba(255,255,255,0.2)
        .text
          font-size 14px
          font-weight 700
          line-height 14px
          color #ffffff
          margin 0 12px
      .supports_list
        width 80%
        margin 24px auto 28px auto
        .supports_item
          display flex
          align-items center
          padding 0 12px
          margin-bottom 12px
          &:last-child
            margin-bottom 0
          .item_icon
            width 16px
            height 16px
            display inline-block
            vertical-align top
            background-size 16px 16px
            background-repeat no-repeat
            &.decrease 
              bg-image('decrease_1');
            &.discount 
              bg-image('discount_1');
            &.gurantee 
              bg-image('guarantee_1');
            &.invoice 
              bg-image('invoice_1');
            &.special 
              bg-image('special_1');
          .item_text
            margin-left 6px
            font-size 12px
            font-weight 200
            color #ffffff
      .notice_detal
        display flex
        width 80%
        margin 0 auto
        .line
          flex  1
          position relative
          top -7px
          border-bottom 1px solid rgba(255,255,255,0.2)
        .text
          padding 0 12px
          font-size 14px
          font-weight 700
          color #ffffff
      .notice_content
        width 80%
        margin  24px auto 0 auto
        .text
          margin 0 12px
          font-size 12px
          font-weight 200
          line-height 24px
          color #ffffff
  .detail_close 
    position: relative;
    font-size: 32px;
    clear: both;
    color: rgba(255, 255, 255, 0.5);
    width: 32px;
    height: 32px;
    margin: -64px auto 0 auto;



 
</style>